<template>
  <!-- 终止生产计划 -->
  <a-modal :width="1200" v-model:visible="showStopProduction" title="是否需要终止生产" :ok-loading="submitLoading" okText="确认终止" title-align="start" :mask-closable="false" @cancel="closedDialog" :on-before-ok="saveData">
    <p style="margin-bottom: 10px">请再次确认是否需要将以下计划终止生产，终止之后计划状态进入到已完成。</p>
    <a-table class="table-singe-line show-border-table" :data="tableList" :scroll="{ y: 'calc(84vh - 180px)' }" size="mini" :pagination="false">
      <template #columns>
        <a-table-column data-index="billNo" title="生产单号" :width="130" fixed="left">
          <template #cell="{ record }">
            <a-space :size="4">
              <p class="highlight">{{ record.billNo }}</p>
              <CopyText :val="record.billNo" class="popup-edit-icon-hover" />
            </a-space>
          </template>
        </a-table-column>
        <a-table-column title="产品" :width="250" fixed="left">
          <template #cell="{ record }">
            <div class="flex-c">
              <ImgPopover :src="record.productImg">
                <template #con>
                  <a-image width="60" height="60" fit="contain" :src="record.productImg" />
                </template>
              </ImgPopover>
              <p class="highlight" style="flex: 1">{{ record.sku }}</p>
            </div>
          </template>
        </a-table-column>
        <a-table-column data-index="productSpecs" title="SKU规格" :width="100">
          <template #cell="{ record }">
            <TextLimit :val="getProductSpecs(record)" />
          </template>
        </a-table-column>
        <a-table-column data-index="productSpecs" title="生产参数" :width="100">
          <template #cell="{ record }">
            <PurchasePropPopover v-if="record.purchaseSpecsArr" :purchaseSpecsArr="record.purchaseSpecsArr" />
          </template>
        </a-table-column>
        <a-table-column data-index="material" title="材质" :width="60">
          <template #cell="{ record }">
            <p>{{ getMaterial(record) }}</p>
          </template>
        </a-table-column>
        <a-table-column data-index="productType" title="类型" :width="60">
          <template #cell="{ record }">
            <p>{{ productTypeMap[record.productType] || record.productType }}</p>
          </template>
        </a-table-column>
        <a-table-column data-index="warehouseName" title="生产入库仓" :width="100" />
        <a-table-column data-index="productionAmt" title="生产数量" :width="70" />
        <a-table-column data-index="warehouseRealAmt" title="生产入库数" :width="80" />
        <a-table-column data-index="warehouseStayAmt" title="未生产数" :width="85">
          <template #title>
            <a-popover content="未生产数=生产数量-生产入库数">
              <p>
                <span>未生产数</span>
                <icon-question-circle />
              </p>
            </a-popover>
          </template>
        </a-table-column>
        <a-table-column title="操作" :width="60" fixed="right">
          <template #cell="{ rowIndex }">
            <a-popconfirm content="确认移除？" @ok="tableList.splice(rowIndex, 1)" type="warning">
              <a-button type="text" size="mini">移除</a-button>
            </a-popconfirm>
          </template>
        </a-table-column>
      </template>
    </a-table>
  </a-modal>
</template>
<script lang="ts" setup>
  import { ref } from 'vue'
  import { Message } from '@arco-design/web-vue'
  import { closeProductionPlan } from '@/api/purchaseApplication'
  import PurchasePropPopover from './purchasePropPopover.vue'
  import { cloneDeep } from 'lodash-es'
  import { parseJson } from '@/utils'

  const emit = defineEmits(['closed', 'success'])
  const props = defineProps({
    isShow: {
      type: Boolean,
      default: false,
    },
    list: {
      type: Array,
      default: () => [],
    },
  })
  const showStopProduction = ref(props.isShow)
  const submitLoading = ref(false)
  const tableList = ref<Array<any>>(cloneDeep(props.list))
  const productTypeMap = {
    1: '普货',
    2: '打样',
    3: '定制',
  }

  // 获取材质
  function getMaterial(row: any) {
    let propArr = row.purchaseSpecsArr || []
    return propArr.find((el: any) => el.name == '材质')?.purchaseValue
  }
  // 显示sku规格
  function getProductSpecs(item: any) {
    let productSpecs = item.productSpecs ? parseJson(item.productSpecs, []) : []
    return productSpecs.map((el: any) => el.valueCn)?.join('*') || '--'
  }
  async function saveData() {
    if (!tableList.value.length) {
      Message.error('最少选择一个生产计划')
      return false
    }
    const res: any = await closeProductionPlan({
      ids: tableList.value.map((el: any) => el.id),
    })
    if (!res) return false
    Message.success('终止成功')
    emit('success')
    closedDialog()
  }
  // 关闭
  function closedDialog() {
    showStopProduction.value = false
    emit('closed')
  }
</script>
<style lang="less" scoped></style>
